<script lang="ts" setup>
import type { ColumnDialogEmits, ColumnDialogProps } from '../types/QueryCondition';
import QuestionImg from '@/assets/image/question.svg';
import { t } from '@/locales';
import { useColumnDialog } from '../hooks/UseColumnDialog';
import styles from '../index.module.scss';

const props = withDefaults(defineProps<ColumnDialogProps>(), {
  title: '',
  dialogSize: 'large',
});

const emit = defineEmits<ColumnDialogEmits>();

const {
  dialogVisible,
  formRefs,
  dialogWidth,
  openDialog,
  submitDialog,
  closeDialog,
  modelValue,
  disabled,
  dialogMode,
  rules,
  inheritList,
} = useColumnDialog(props, emit);
</script>

<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :title="props.title"
      :width="dialogWidth"
      :close-on-click-modal="false"
      destroy-on-close
      class="role-add-editor-dialog"
      @close="closeDialog"
      @open="openDialog"
    >
      <div :class="styles['my-form']">
        <el-form ref="formRefs" :rules="rules" :model="modelValue" label-width="120px" label-suffix="：">
          <el-row :gutter="12">
            <el-col :span="12">
              <el-form-item prop="roleCode" :label="t('roleManage.columnList.roleCode')">
                <el-input v-model="modelValue.roleCode" :disabled="dialogMode === 'edit'" :placeholder="t('roleManage.placeholder.roleCode')" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="roleName" :label="t('roleManage.columnList.roleName')">
                <el-input v-model="modelValue.roleName" :disabled="disabled" :placeholder="t('roleManage.placeholder.roleName')" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item prop="description" :label="t('roleManage.columnList.roleDesc')">
                <el-input
                  v-model="modelValue.description"
                  :disabled="disabled"
                  type="textarea"
                  :maxlength="200"
                  :show-word-limit="true"
                  :rows="3"
                  :placeholder="t('roleManage.placeholder.roleDesc')"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="4">
            <el-col :span="12">
              <el-form-item prop="inheritedRoleId" :label="t('roleManage.columnList.parentRole')">
                <el-select v-model="modelValue.inheritedRoleId" clearable :disabled="disabled" :placeholder="t('roleManage.placeholder.select')">
                  <el-option v-for="item in inheritList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="subVisible" :label="t('roleManage.columnList.subVisible')">
                <el-switch v-model="modelValue.subVisible" :active-value="1" :inactive-value="0" />
              </el-form-item>
            </el-col>
            <el-col :style="{ paddingTop: '10px' }" :span="2">
              <el-tooltip
                :popper-class="styles['sub-visible-tip']"
                effect="light"
                placement="top"
                :content="t('roleManage.subVisibleTip')"
              >
                <QuestionImg />
              </el-tooltip>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item prop="status" :label="t('roleManage.columnList.status')">
                <el-radio-group v-model="modelValue.status" :disabled="disabled" class="ml-7">
                  <el-radio :value="1">
                    {{ t("roleManage.status.enable") }}
                  </el-radio>
                  <el-radio :value="0">
                    {{ t("roleManage.status.disable") }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item :label="t('roleManage.columnList.tip')">
                <el-input
                  v-model="modelValue.remark"
                  :disabled="disabled"
                  type="textarea"
                  :maxlength="200"
                  :show-word-limit="true"
                  :rows="3"
                  :placeholder="t('roleManage.placeholder.remark')"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div>
          <div :class="styles['dialog-footer']">
            <el-button @click="closeDialog">
              {{ t("roleManage.cancelText") }}
            </el-button>
            <el-button type="primary" @click="submitDialog">
              {{ t("roleManage.confirmText") }}
            </el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
:global(.el-dialog.role-add-editor-dialog) {
  width: 1184px;
  height: 560px;
}
// 1600px - 1920px 区间使用中等尺寸样式
@include screen-1600-to-1920 {
  :global(.el-dialog.role-add-editor-dialog) {
    width: 992px;
    height: 560px !important;
  }
}

// 小于 1600px 使用小尺寸样式
@include screen-below-1600 {
  :global(.el-dialog.role-add-editor-dialog) {
    width: 840px;
    height: 560px !important;
  }
}
</style>
